<template>
  <!-- 这里是顶部导航栏 -->
  <div class="navbar bg-base-100 fixed h-16 ">
    <div class="flex w-2/12 md:w-4/12 justify-start items-center  ">
      <Drawer class="z-40" :is-show="drawerShow"></Drawer>
      <label class="text-4xl mr-2">
        <img src="../assets/logo.png" alt="" class="w-20">
      </label>
      <router-link :to="item.href" v-for="item in navItems"
                   :key="item.name"
                   :href="item.href"
                   @click="navItems.forEach((value)=>{
                           value.current = item.name == value.name;
                       })"
                   class="hidden md:flex px-6 mx-1"
                   :class="[item.current ? 'btn btn-primary normal-case text-xl' : 'btn btn-ghost normal-case text-xl', 'rounded-md px-3 ']"
                   :aria-current="item.current ? 'page' : undefined">{{ item.name }}
      </router-link>
    </div>
    <div class="flex w-8/12 md:w-4/12 justify-center items-center relative ">
      <!--搜索框-->
      <input type="text" placeholder="Search…"
             v-model="searchData"
             class="w-full input input-bordered  focus:outline-0"/>
      <button @click="search()" class="absolute top-0 right-0 btn btn-ghost btn-square focus:outline-0">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
             stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
      </button>
    </div>
    <div class="flex w-2/12 md:w-4/12 justify-end items-center  ">
      <div class="dropdown dropdown-end block">
        <label tabindex="0" class="btn m-1 btn-circle overflow-clip">
          <img v-if="state.isAuthenticated == 'true' && user.avatar!=null" :src="user.avatar" alt="头像"
               class=" w-12 h-12 object-cover object-center">
          <div v-else-if="state.isAuthenticated == 'true' && user.avatar==null" class="focus:outline-0 text-2xl btn btn-primary">
            {{ user?.['username'].substring(0, 1).toUpperCase() }}
          </div>
          <div v-else class="focus:outline-0 text-sm">NULL</div>
        </label>

        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 z-30">
          <li v-if="state.isAuthenticated == 'true'">
            <router-link to="/user" class="dropdown" aria-hidden="true">个人主页</router-link>
            <router-link @click="logout()" to="/login">登出</router-link>
          </li>
          <li v-else>
            <router-link to="/login">登录</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import {onMounted, reactive, ref,} from 'vue'
import Drawer from "./Drawer.vue";
import router from "../plugins/router.ts";


//数据
let searchData = ref();

function search() {
  if (searchData.value != '') {
    router.push('/search/' + searchData.value)
  }
}


let drawerShow = ref(false)
let user = JSON.parse(sessionStorage.getItem("user"));


let state = reactive({
  isAuthenticated: ''
})

onMounted(() => {
  state.isAuthenticated = window.sessionStorage.getItem('isAuthenticated')
})


function logout() {
  sessionStorage.removeItem('isAuthenticated')
  sessionStorage.removeItem('user')
  location.reload()
}


const navItems = ref([
  {name: '主页', href: '/home', current: true},
  {name: '上传', href: '/add', current: false}
])
</script>
<style scoped>
@media screen
</style>
